<template>
	<block v-if="edit">
		
		<view class="mobile-scene-controller">
			<scroll-view scroll-y class="scene-scroll" :scroll-into-view="scrollToFocusId" scroll-with-animation>
				<uni-forms-item label="场景名" style="color: #73738f;" class="uni-f-item-row">
					<uni-easyinput v-model="opt.title" :styles="inputStyle" placeholder="请输入场景名" :maxlength="8" primaryColor="#9393b8" @input="sceneNameChanged"/>
				</uni-forms-item>
				<!-- <uni-forms-item label="场景简介" style="color: #73738f;" class="uni-f-item-row">
					<uni-easyinput v-model="opt.desc" :styles="inputStyle" placeholder="请输入场景简介" :maxlength="15" primaryColor="#9393b8" @input="sceneDescChanged"/>
				</uni-forms-item> -->
				<uni-forms-item label="组件" style="color: #73738f;">
					
					<block v-for="(c, index) in opt.allComponents" :key="c.temp_id">
						
						<blood-bar-edit 
						v-if="c.table_name == 'blood_bar'"
						style="margin-bottom: 10px;" 
						:id="'cp' + c.temp_id"
						:in_focus="c.temp_id == comp_edit_temp_id" 
						:componentInfo="c"
						@positionChanged="(position) => cpPositionChanged(index, position)"
						@scaleChanged="(scale) => cpScaleChanged(index, scale)"
						@opacityChanged="(opacity) => cpOpacityChanged(index, opacity)"
						@countdownChanged="(countdown) => cpCountdownChanged(index, countdown)"
						@titleChanged="(title) => cpTitleChanged(index, title)"
						@del="del(index)"/>

						<gifts-edit
						v-if="c.table_name == 'gifts'"
						style="margin-bottom: 10px;" 
						:id="'cp' + c.temp_id"
						:in_focus="c.temp_id == comp_edit_temp_id" 
						:componentInfo="c"
						@positionChanged="(position) => cpPositionChanged(index, position)"
						@scaleChanged="(scale) => cpScaleChanged(index, scale)"
						@opacityChanged="(opacity) => cpOpacityChanged(index, opacity)"
						@spaceChanged="(space) => cpCountdownChanged(index, space)"
						@titleChanged="(title) => cpTitleChanged(index, title)"
						@del="del(index)"/>

						<rank-edit
						v-if="c.table_name == 'rank'"
						style="margin-bottom: 10px;" 
						:id="'cp' + c.temp_id"
						:in_focus="c.temp_id == comp_edit_temp_id" 
						:componentInfo="c"
						@positionChanged="(position) => cpPositionChanged(index, position)"
						@scaleChanged="(scale) => cpScaleChanged(index, scale)"
						@opacityChanged="(opacity) => cpOpacityChanged(index, opacity)"
						@max_show_numChanged="(max_show_num) => cpMax_show_numChanged(index, max_show_num)"
						@titleChanged="(title) => cpTitleChanged(index, title)"
						@del="del(index)"/>

					</block>
					
					<button @click="addComponent" type="warn" size="default"><uni-icons type="plusempty" size="20" color="#fff"></uni-icons></button>
				</uni-forms-item>
			</scroll-view>
		</view>
		
	</block>
	<block v-else>
		
		<view class="mobile-scene-controller show">
			<view class="components-controller">
				<menus
				class="components-menus"
				:options='opt.allComponents' 
				:selectedIndex="components_menu_selectedIndex"
				@click="controlMenuClick"/>
				
				<view class="mobile-scene-controller">
					<scroll-view scroll-y class="scene-scroll-ctr" :scroll-into-view="scrollToFocusId" scroll-with-animation>
						<block v-if="opt.allComponents.length > 0">
							<block v-if="opt.allComponents[components_menu_selectedIndex].table_name == 'blood_bar'">
								<blood-bar-controller
								:cpt="opt.allComponents[components_menu_selectedIndex]"
								@resetTime="bloodBarRestTime(opt.allComponents[components_menu_selectedIndex])"
								@playTime="bloodBarPlayTime(opt.allComponents[components_menu_selectedIndex])"
								@timeShareClick="bloodTimeShareClick(opt.allComponents[components_menu_selectedIndex])"
								@componentAutoBindClick="bloodBarAutoBindClick(opt.allComponents[components_menu_selectedIndex])"
								@use_user_iconClick="bloodBarUse_user_iconClick(opt.allComponents[components_menu_selectedIndex])"
								@componentShowClick="cptShowClick(opt.allComponents[components_menu_selectedIndex])"
								/>
							</block>
							<block v-if="opt.allComponents[components_menu_selectedIndex].table_name == 'gifts'">
								<gifts-controller
								:cpt="opt.allComponents[components_menu_selectedIndex]"
								@componentShowClick="cptShowClick(opt.allComponents[components_menu_selectedIndex])"
								@componentAutoBindClick="bloodBarAutoBindClick(opt.allComponents[components_menu_selectedIndex])"
								/>
							</block>
							
							<block v-if="opt.allComponents[components_menu_selectedIndex].table_name == 'rank'">
								<rank-controller
								:cpt="opt.allComponents[components_menu_selectedIndex]"
								@componentShowClick="cptShowClick(opt.allComponents[components_menu_selectedIndex])"
								/>
							</block>
							
						</block>
					</scroll-view>
				</view>
			</view>
		</view>
	</block>
</template>

<script>
	
	import menus from '@/components/menus/menus.vue'
	
	import bloodBarEdit from '@/components/blood-bar/blood-bar-edit.vue'
	import bloodBarController from '@/components/blood-bar/blood-bar-controller.vue'

	import giftsEdit from '@/components/gifts/gifts-edit.vue'
	import giftsController from '@/components/gifts/gifts-controller.vue'
	
	import rankEdit from '@/components/rank/rank-edit.vue'
	import rankController from '@/components/rank/rank-controller.vue'
	
	
	export default {
		name:"mobile-scene-controller",
		components: {
			bloodBarEdit,
			bloodBarController,
			menus,
			giftsEdit,
			giftsController,
			rankEdit,
			rankController
		},
		props: {
			edit: {
				type: Boolean,
				default: true
			},
			index: {
				type: Number,
				default: -1
			}
		},
		watch: {
			index(newVal) {
				this.configData()
			}
		},
		
		data() {
			return {
				opt: {
					title: '',
					desc: '',
					allComponents: []
				},
				dataChanged: false,
				inputStyle: {
					color: '#b3b3de',
					backgroundColor: '#4b4b5d',
					disableColor: '#383846',
					borderColor: '#73738f'
				},
				comp_edit_temp_id: null,
				scrollToFocusId: null,
				components_menu_selectedIndex: 0
			};
		},

		created() {
			
			this.configData()
			
			// 场景内容发生变化
			window.electronAPI.noticeSceneChanged((scene, index, cpt_index, from) => {
				if (from != 'mobile-scene-controller') {
					this.opt = scene
					if (cpt_index != -1) {
						const cpt = this.opt.allComponents[cpt_index]
						this.comp_edit_temp_id = cpt.temp_id
						this.scrollToFocusId = "cp" + cpt.temp_id
					}
				}
			})
		},
		
		beforeDestroy() {
			// 移除 场景内容发生变化监听
			window.electronAPI.removeNoticeSceneChanged()
		},

		methods: {
			
			configData() {
				// 获取对应的数据
				window.electronAPI.getSceneWithIndex(this.index).then((scene) => {
					this.opt = scene
					if (this.opt.allComponents.length > 0) {
						this.components_menu_selectedIndex = 0
					}
				})
			},
			
			bloodBarAutoBindClick(cpt) {
				if (cpt.auto_bind == 1) {
					cpt.auto_bind = 0
				} else {
					cpt.auto_bind = 1
				}
				window.electronAPI.sceneChanged(this.opt, this.index, this.components_menu_selectedIndex, true, 'mobile-scene-controller')
			},
			
			cptShowClick(cpt) {
				if (cpt.show == 1) {
					cpt.show = 0
				} else {
					cpt.show = 1
				}
				window.electronAPI.sceneChanged(this.opt, this.index, this.components_menu_selectedIndex, true, 'mobile-scene-controller')
			},
			
			bloodTimeShareClick(cpt) {
				if (cpt.share_countdown == 1) {
						cpt.share_countdown = 0
					} else {
						cpt.share_countdown = 1
					}
				window.electronAPI.sceneChanged(this.opt, this.index, this.components_menu_selectedIndex, true, 'mobile-scene-controller')
			},

			bloodBarUse_user_iconClick(cpt) {
				if (cpt.use_user_icon == 1) {
					cpt.use_user_icon = 0
				} else {
					cpt.use_user_icon = 1
				}
				window.electronAPI.sceneChanged(this.opt, this.index, this.components_menu_selectedIndex, true, 'mobile-scene-controller')
			},
			
			bloodBarRestTime(cpt) {
				cpt.current_countdown = cpt.countdown
				// 如果当前组件是共享计时器，则将同时共享计时的组件通通更新状态
				if (cpt.share_countdown == 1) {
					for (let aCpt of this.opt.allComponents) {
						if (aCpt.share_countdown == 1) {
							aCpt.current_countdown = aCpt.countdown
						}
					}
				}
				window.electronAPI.sceneChanged(this.opt, this.index, this.components_menu_selectedIndex, true, 'mobile-scene-controller')
			},
			
			bloodBarPlayTime(cpt) {
				if (cpt.countdown_status == 1) {
					cpt.countdown_status = 0
				} else {
					cpt.countdown_status = 1
				}
				
				// 如果当前组件是共享计时器，则将同时共享计时的组件通通更新状态
				if (cpt.share_countdown == 1) {
					for (let aCpt of this.opt.allComponents) {
						if (aCpt.share_countdown == 1) {
							aCpt.countdown_status = cpt.countdown_status
						}
					}
				}
				window.electronAPI.sceneChanged(this.opt, this.index, this.components_menu_selectedIndex, true, 'mobile-scene-controller')
			},
			
			controlMenuClick(index) {
				this.components_menu_selectedIndex = index
			},
			
			neSceneData() {
				return JSON.parse(JSON.stringify(this.opt))
			},
			
			// resetLocal(localOpt) {
			// 	this.localOpt = JSON.stringify(localOpt)
			// },
			
			addComponent() {
				window.electronAPI.showAddComponentsWin()
			},
			
			sceneNameChanged(e) {
				this.opt.title = e
				window.electronAPI.sceneChanged(this.opt, this.index, -1, true, 'mobile-scene-controller')
			},
			
			sceneDescChanged(e) {
				this.opt.desc = e
				window.electronAPI.sceneChanged(this.opt, this.index, -1, true, 'mobile-scene-controller')
			},
			
			cpPositionChanged(index, position) {
				this.opt.allComponents[index].x = position.x
				this.opt.allComponents[index].y = position.y
				window.electronAPI.sceneChanged(this.opt, this.index, index, true, 'mobile-scene-controller')
			},
			
			cpScaleChanged(index, scale) {
				this.opt.allComponents[index].scale = scale
				window.electronAPI.sceneChanged(this.opt, this.index, index, true, 'mobile-scene-controller')
			},
			
			cpOpacityChanged(index, opacity) {
				this.opt.allComponents[index].opacity = opacity
				window.electronAPI.sceneChanged(this.opt, this.index, index, true, 'mobile-scene-controller')
			},
			
			cpCountdownChanged(index, countdown) {
				this.opt.allComponents[index].countdown = countdown
				this.opt.allComponents[index].current_countdown = countdown
				window.electronAPI.sceneChanged(this.opt, this.index, index, true, 'mobile-scene-controller')
			},
			
			cpCountdownChanged(index, space) {
				this.opt.allComponents[index].space = space
				window.electronAPI.sceneChanged(this.opt, this.index, index, true, 'mobile-scene-controller')
			},
			
			cpMax_show_numChanged(index, max_show_num) {
				this.opt.allComponents[index].max_show_num = max_show_num
				window.electronAPI.sceneChanged(this.opt, this.index, index, true, 'mobile-scene-controller')
			},
			
			cpTitleChanged(index, title) {
				this.opt.allComponents[index].title = title
				window.electronAPI.sceneChanged(this.opt, this.index, index, true, 'mobile-scene-controller')
			},
			
			
			
			del(index) {
				const temp_id = this.opt.allComponents[index].temp_id
				this.opt.allComponents.splice(index, 1)
				window.electronAPI.sceneChanged(this.opt, this.index, index, true, 'mobile-scene-controller')
			},
			
			
			changeCptExt(ext) {
				
				this.$emit('changeCptExt', {
					index: this.components_menu_selectedIndex,
					ext: ext
				})
				
				// this.opt.allComponents[this.components_menu_selectedIndex].ext = ext
				// console.log(this.opt.allComponents[this.components_menu_selectedIndex])
			}
		}
	}
</script>

<style scoped>
	
	::v-deep ::-webkit-scrollbar {
	  display: block !important; /* 强制显示滚动条 */
	  width: 4px;                /* 滚动条的宽度 */
	  height: 4px;              /* 滚动条的高度 */
	}
	
	::v-deep ::-webkit-scrollbar-thumb {
	  background-color: #49495a;   /* 滚动条滑块的颜色 */
	  border-radius: 2px;      /* 滚动条滑块的圆角 */
	}
	
	::v-deep ::-webkit-scrollbar-track {
	  background-color: #272730; /* 滚动条轨道的颜色 */
	  border-radius: 10px;       /* 滚动条轨道的圆角 */
	}
	
	.mobile-scene-controller {
		width: 100%;
		height: 100%;
		background-color: #272730;
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
		border-top-right-radius: 3px;
		display: flex;
		border: #73738f 1px solid;
	}
	
	.show {
		background-color: #393947;
		display: flex;
		flex-direction: column;
	}
	
	.scene-scroll {
		margin: 30px;
	}
	
	.scene-scroll-ctr {
		margin: 0;
	}
	
	.uni-f-item-row {
		margin-bottom: 22px;
	}
	
	.components-controller {
		margin: 10px;
		width: calc(100% - 20px);
		height: calc(100% - 20px);
		display: flex;
		flex-direction: column;
	}

</style>